<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script>
        window.onload = function (){
            findCountry();
        }

        function findCountry(){
            axios.get("/country/findAll").then(e =>{
                let str="";
                for(var i = 0 ; i < e.data.length;i++){
                    var countryObj = e.data[i];
                    str += `<option value="${countryObj.id}">${countryObj.name}</option>`
                }
                $("countrySelect").innerHTML = str;
            });
        }

        function $(id){
            return document.getElementById(id);
        }

        function findCity(){
            axios.get("/city/findByCountry",{params:{countryId:$("countrySelect").value}}).
            then(e =>{
                var str="";
                for (var i=0;i<e.data.length;i++){
                    var cityObj =e.data[i];
                    str+=`<option value="${cityObj.id}">${cityObj.name}</option>`;
                }
                $("citySelect").innerHTML =str;
        });
        }
    </script>
</head>
<body>
    <select id="countrySelect" style="width: 100px;" onchange="findCity()"></select>
    <select id="citySelect" style="width: 100px; margin-right: 50px;"></select>
</body>
</html>